<script setup lang="ts">
import '@/styles/anim.css'
import '@/assets/iconfont/iconfont.css'
import { onBeforeRouteUpdate } from "vue-router"
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
// 是否显示tabbar
// const showTabbar = ref(true)
//路由变化
onBeforeRouteUpdate((to) => {
  //showTabbar.value = !(to.name === 'music' || to.name === 'mine' || to.name === 'discover')
  const array = document.querySelectorAll('span')
  //console.log(array)
  if (to.name === 'discover') {
    stopAnim(true)
    return array.forEach((item, index) => {
      if (index === 0 || index === 1) {
        item.classList.add('txt-select-color')
      } else {
        item.classList.remove('txt-select-color')
      }
      item.classList.remove('sada-select-backgroud-color')

    })
  }
  if (to.name === 'music') {
    stopAnim(false)
    return array.forEach((item, index) => {
      if (index === 2 || index === 6) {
        item.classList.add('txt-select-color')
      }
      else if (index === 3 || index === 4 || index === 5) {
        item.classList.add('sada-select-backgroud-color')
      }
      else {
        item.classList.remove('txt-select-color')
      }
    })
  }
  if (to.name === 'mine') {
    stopAnim(true)
    return array.forEach((item, index) => {
      if (index === 7 || index === 8) {
        item.classList.add('txt-select-color')
      } else {
        item.classList.remove('txt-select-color')
      }
      item.classList.remove('sada-select-backgroud-color')
    })
  }

})

const stopAnim = (isStop: boolean) => {
  const array = document.querySelectorAll('.sada-item')
  if (isStop) {
    array.forEach((item,index) => {
      const classname = index === 1 ? 'big-small-big-anima':'small-big-small-anima'
      item.classList.remove(classname)
    })
  }
  else {
    array.forEach((item,index) => {
      const classname = index === 1 ? 'big-small-big-anima':'small-big-small-anima'
      item.classList.add(classname)
    })
  }
}

onMounted(()=>{
  stopAnim(false)
  const array = document.querySelectorAll('span')
  array.forEach((item, index) => {
      if (index === 2 || index === 6) {
        item.classList.add('txt-select-color')
      }
      else if (index === 3 || index === 4 || index === 5) {
        item.classList.add('sada-select-backgroud-color')
      }
      else {
        item.classList.remove('txt-select-color')
      }
    })
})

</script>
<template>
  <!-- TabBar -->
  <div class="tab-bar base-tabbar-color" v-show="!$route.meta.hideTabBar">
    <router-link class="tabbar-item" to="/discover">
      <span class="iconfont icon-erji icon" />
      <span class="txt">发现</span>
    </router-link>
    <router-link class="tabbar-item" to="/music">
      <span class="sada-anim">
        <span class="sada-item small-big-small-anima" id="#left" />
        <span class="sada-item big-small-big-anima" id="#center" />
        <span class="sada-item small-big-small-anima" id="#right" />
      </span>
      <span class="txt" style="padding-top: 1.5vw;">音乐</span>
    </router-link>
    <router-link class="tabbar-item" to="/mine">
      <span class="iconfont icon-yonghu icon" />
      <span class="txt">用户</span>
    </router-link>
  </div>

  <van-safe-area-bottom />
  <!-- 路由出口 -->
  <RouterView />
  
</template>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  width: 100%;
  height: 16vw;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10vw;
  z-index: 1000;
}

.tabbar-item {
  //margin-bottom: 6vw;
  background-color: transparent;
  width: 20vw;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

.icon {
  background-color: transparent;
  font-size: 6vw;
  color: #999;
}

.txt {
  display: inline-block;
  background-color: transparent;
  color: #999;
  font-size: 4vw;
  width: 100%;
  text-align: center;
}



.sada-anim {
  display: block;
  margin-top: 2.6vw;
  height: 8vw;
  width: 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
}

.sada-item {
  background-color: #999;
  display: inline-block;
  width: 1.5vw;
  height: 6vw;
}

.txt-select-color {
  color: white;
}

.sada-select-backgroud-color {
  background-color: white;
}
</style>